import React, { useEffect, useRef, useState } from 'react';
import { Tabs, Divider, Button } from 'antd-mobile';
import styles from './index.less';
import './index.less';
import { useThrottleFn } from 'ahooks';
import { history } from 'umi';
import { NavBar, Space, Toast, Modal } from 'antd-mobile';
import { ShareO, WeappNav } from '@react-vant/icons';
import { ShareSheet } from 'react-vant';

const tabHeight = 90;

export default () => {
  const [visible, setVisible] = useState(false);
  const conRef = useRef(null);
  const back = () => {
    history.push('/my');
  };
  const options1 = [
    [
      { name: '微信', icon: 'wechat' },
      { name: '朋友圈', icon: 'wechat-moments' },
      { name: '微博', icon: 'weibo' },
      { name: 'QQ', icon: 'qq' },
    ],
    [
      { name: '复制链接', icon: 'link' },
      { name: '分享海报', icon: 'poster' },
      { name: '二维码', icon: 'qrcode' },
      { name: '小程序码', icon: 'weapp-qrcode' },
    ],
  ];
  const right = (
    <div style={{ fontSize: 24 }} onClick={() => setVisible(true)}>
      <Space style={{ '--gap': '16px' }}>
        <ShareO />
      </Space>
      <ShareSheet
        visible={visible}
        options={options1}
        title="立即分享给好友"
        onCancel={() => setVisible(false)}
        onSelect={(option, index) => {
          setVisible(false);
        }}
      />
    </div>
  );
  let [tabItems, setmenu] = useState([
    {
      key: 'part-1',
      href: '#part-1',
      title: '推荐',
      children: [
        {
          id: 1,
          imgurl: 'tc1.jpg',
        },
        {
          id: 2,
          imgurl: 'tc2.jpg',
        },
        {
          id: 3,
          imgurl: 'tc3.jpg',
        },
        {
          id: 4,
          imgurl: 'tc4.jpg',
        },
        {
          id: 5,
          imgurl: 'tc5.jpg',
        },
        {
          id: 6,
          imgurl: 'tc6.jpg',
        },
        {
          id: 7,
          imgurl: 'tc7.jpg',
        },
      ],
    },
    {
      key: 'part-2',
      href: '#part-2',
      title: '视频请帖',
      children: [
        {
          id: 1,
          imgurl: 'sp1.jpg',
        },
        {
          id: 2,
          imgurl: 'sp2.jpg',
        },
        {
          id: 3,
          imgurl: 'sp3.jpg',
        },
        {
          id: 4,
          imgurl: 'tc4.jpg',
        },
        {
          id: 5,
          imgurl: 'tc5.jpg',
        },
        {
          id: 6,
          imgurl: 'tc6.jpg',
        },
        {
          id: 7,
          imgurl: 'tc7.jpg',
        },
      ],
    },
    {
      key: 'part-3',
      href: '#part-3',
      title: '长图海报',
      children: [
        {
          id: 1,
          imgurl: 'ct1.jpg',
        },
        {
          id: 2,
          imgurl: 'ct2.jpg',
        },
        {
          id: 3,
          imgurl: 'ct4.jpg',
        },
        {
          id: 4,
          imgurl: 'ct4.jpg',
        },
        {
          id: 5,
          imgurl: 'tc5.jpg',
        },
        {
          id: 6,
          imgurl: 'tc6.jpg',
        },
        {
          id: 7,
          imgurl: 'tc7.jpg',
        },
      ],
    },
    {
      key: 'part-4',
      href: '#part-4',
      title: '中国风',
      children: [
        {
          id: 1,
          imgurl: 'tc1.jpg',
        },
        {
          id: 2,
          imgurl: 'tc2.jpg',
        },
        {
          id: 3,
          imgurl: 'tc3.jpg',
        },
        {
          id: 4,
          imgurl: 'tc4.jpg',
        },
        {
          id: 5,
          imgurl: 'tc5.jpg',
        },
        {
          id: 6,
          imgurl: 'tc6.jpg',
        },
        {
          id: 7,
          imgurl: 'tc7.jpg',
        },
      ],
    },
    {
      key: 'part-5',
      href: '#part-5',
      title: '时尚大图',
      children: [
        {
          id: 1,
          imgurl: 'tc1.jpg',
        },
        {
          id: 2,
          imgurl: 'tc2.jpg',
        },
        {
          id: 3,
          imgurl: 'tc3.jpg',
        },
        {
          id: 4,
          imgurl: 'tc4.jpg',
        },
        {
          id: 5,
          imgurl: 'tc5.jpg',
        },
        {
          id: 6,
          imgurl: 'tc6.jpg',
        },
        {
          id: 7,
          imgurl: 'tc7.jpg',
        },
      ],
    },
    {
      key: 'part-6',
      href: '#part-6',
      title: '创意趣味',
      children: [
        {
          id: 1,
          imgurl: 'tc1.jpg',
        },
        {
          id: 2,
          imgurl: 'tc2.jpg',
        },
        {
          id: 3,
          imgurl: 'tc3.jpg',
        },
        {
          id: 4,
          imgurl: 'tc4.jpg',
        },
        {
          id: 5,
          imgurl: 'tc5.jpg',
        },
        {
          id: 6,
          imgurl: 'tc6.jpg',
        },
        {
          id: 7,
          imgurl: 'tc7.jpg',
        },
      ],
    },
    {
      key: '清新',
      href: '#part-7',
      title: '清新',
      children: [
        {
          id: 1,
          imgurl: 'tc1.jpg',
        },
        {
          id: 2,
          imgurl: 'tc2.jpg',
        },
        {
          id: 3,
          imgurl: 'tc3.jpg',
        },
        {
          id: 4,
          imgurl: 'tc4.jpg',
        },
        {
          id: 5,
          imgurl: 'tc5.jpg',
        },
        {
          id: 6,
          imgurl: 'tc6.jpg',
        },
        {
          id: 7,
          imgurl: 'tc7.jpg',
        },
      ],
    },
    {
      key: '花卉',
      href: '#part-8',
      title: '花卉',
      children: [
        {
          id: 1,
          imgurl: 'tc1.jpg',
        },
        {
          id: 2,
          imgurl: 'tc2.jpg',
        },
        {
          id: 3,
          imgurl: 'tc3.jpg',
        },
        {
          id: 4,
          imgurl: 'tc4.jpg',
        },
        {
          id: 5,
          imgurl: 'tc5.jpg',
        },
        {
          id: 6,
          imgurl: 'tc6.jpg',
        },
        {
          id: 7,
          imgurl: 'tc7.jpg',
        },
      ],
    },
    {
      key: 'ins极简',
      href: '#part-9',
      title: 'ins极简',
      children: [
        {
          id: 1,
          imgurl: 'tc1.jpg',
        },
        {
          id: 2,
          imgurl: 'tc2.jpg',
        },
        {
          id: 3,
          imgurl: 'tc3.jpg',
        },
        {
          id: 4,
          imgurl: 'tc4.jpg',
        },
        {
          id: 5,
          imgurl: 'tc5.jpg',
        },
        {
          id: 6,
          imgurl: 'tc6.jpg',
        },
        {
          id: 7,
          imgurl: 'tc7.jpg',
        },
      ],
    },
    {
      key: '手绘',
      href: '#part-10',
      title: '手绘',
      children: [
        {
          id: 1,
          imgurl: 'tc1.jpg',
        },
        {
          id: 2,
          imgurl: 'tc2.jpg',
        },
        {
          id: 3,
          imgurl: 'tc3.jpg',
        },
        {
          id: 4,
          imgurl: 'tc4.jpg',
        },
        {
          id: 5,
          imgurl: 'tc5.jpg',
        },
        {
          id: 6,
          imgurl: 'tc6.jpg',
        },
        {
          id: 7,
          imgurl: 'tc7.jpg',
        },
      ],
    },
    {
      key: '崽崽专区',
      href: '#part-11',
      title: '崽崽专区',
      children: [
        {
          id: 1,
          imgurl: 'tc1.jpg',
        },
        {
          id: 2,
          imgurl: 'tc2.jpg',
        },
        {
          id: 3,
          imgurl: 'tc3.jpg',
        },
        {
          id: 4,
          imgurl: 'tc4.jpg',
        },
        {
          id: 5,
          imgurl: 'tc5.jpg',
        },
        {
          id: 6,
          imgurl: 'tc6.jpg',
        },
        {
          id: 7,
          imgurl: 'tc7.jpg',
        },
      ],
    },
    {
      key: '华丽',
      href: '#part-12',
      title: '华丽',
      children: [
        {
          id: 1,
          imgurl: 'tc1.jpg',
        },
        {
          id: 2,
          imgurl: 'tc2.jpg',
        },
        {
          id: 3,
          imgurl: 'tc3.jpg',
        },
        {
          id: 4,
          imgurl: 'tc4.jpg',
        },
        {
          id: 5,
          imgurl: 'tc5.jpg',
        },
        {
          id: 6,
          imgurl: 'tc6.jpg',
        },
        {
          id: 7,
          imgurl: 'tc7.jpg',
        },
      ],
    },
    {
      key: '长辈',
      href: '#part-13',
      title: '长辈',
      children: [
        {
          id: 1,
          imgurl: 'tc1.jpg',
        },
        {
          id: 2,
          imgurl: 'tc2.jpg',
        },
        {
          id: 3,
          imgurl: 'tc3.jpg',
        },
        {
          id: 4,
          imgurl: 'tc4.jpg',
        },
        {
          id: 5,
          imgurl: 'tc5.jpg',
        },
        {
          id: 6,
          imgurl: 'tc6.jpg',
        },
        {
          id: 7,
          imgurl: 'tc7.jpg',
        },
      ],
    },
    {
      key: '公众号',
      href: '#part-14',
      title: '公众号',
      children: [
        {
          id: 1,
          imgurl: 'tc1.jpg',
        },
        {
          id: 2,
          imgurl: 'tc2.jpg',
        },
        {
          id: 3,
          imgurl: 'tc3.jpg',
        },
        {
          id: 4,
          imgurl: 'tc4.jpg',
        },
        {
          id: 5,
          imgurl: 'tc5.jpg',
        },
        {
          id: 6,
          imgurl: 'tc6.jpg',
        },
        {
          id: 7,
          imgurl: 'tc7.jpg',
        },
      ],
    },
    {
      key: '婚礼延期',
      href: '#part-15',
      title: '婚礼延期',
      children: [
        {
          id: 1,
          imgurl: 'tc1.jpg',
        },
        {
          id: 2,
          imgurl: 'tc2.jpg',
        },
        {
          id: 3,
          imgurl: 'tc3.jpg',
        },
        {
          id: 4,
          imgurl: 'tc4.jpg',
        },
        {
          id: 5,
          imgurl: 'tc5.jpg',
        },
        {
          id: 6,
          imgurl: 'tc6.jpg',
        },
        {
          id: 7,
          imgurl: 'tc7.jpg',
        },
      ],
    },
    {
      key: '民族风',
      href: '#part-16',
      title: '民族风',
      children: [
        {
          id: 1,
          imgurl: 'tc1.jpg',
        },
        {
          id: 2,
          imgurl: 'tc2.jpg',
        },
        {
          id: 3,
          imgurl: 'tc3.jpg',
        },
        {
          id: 4,
          imgurl: 'tc4.jpg',
        },
        {
          id: 5,
          imgurl: 'tc5.jpg',
        },
        {
          id: 6,
          imgurl: 'tc6.jpg',
        },
        {
          id: 7,
          imgurl: 'tc7.jpg',
        },
      ],
    },
  ]);
  //
  const [activeKey, setActiveKey] = useState('part-1');

  const { run: runscroll } = useThrottleFn(
    () => {
      let currentKey = tabItems[0].key;
      for (const item of tabItems) {
        const element = document.getElementById(`anchor-${item.key}`);
        if (!element) continue;
        const rect = element.getBoundingClientRect();
        if (rect.top <= tabHeight - 10) {
          currentKey = item.key;
        } else {
          break;
        }
      }
      setActiveKey(currentKey);
    },
    {
      leading: true,
      trailing: true,
      wait: 100,
    },
  );
  //
  useEffect(() => {
    window.addEventListener('scroll', runscroll, true);
    // conRef.current.scrollTo({top:100})
    return () => {
      window.removeEventListener('scroll', runscroll);
    };
  }, []);
  let [imglist, setimg] = useState([1, 2, 3, 4, 5, 6]);

  // 点击更多
  const dian = () => {
    history.push('/xq');
  };
  return (
    <>
      <NavBar
        onBack={back}
        right={right}
        style={{
          backgroundColor: '#f6f5f6',
          position: ' sticky',
          top: '0',
          zIndex: '99999',
        }}
      >
        请帖
      </NavBar>
      <div className={styles.tabsContainer}>
        <Tabs
          style={{
            background: 'white',
            // paddingTop: '45px',
          }}
          activeKey={activeKey}
          onChange={(key) => {
            document.getElementById(`anchor-${key}`)?.scrollIntoView();
            window.scrollTo({ top: -92 });
          }}
        >
          {tabItems.map((item) => (
            <Tabs.Tab title={item.title} key={item.key} />
          ))}
        </Tabs>
      </div>
      <div className={styles.content} ref={conRef}>
        {tabItems.map((i, index) => (
          <div id={`anchor-${i.key}`} key={i.key} className="boxs">
            <div className="top">
              <span style={{ fontSize: '20px', fontWeight: 'bold' }}>
                {i.title}
              </span>
              <span onClick={dian} style={{ fontSize: '15px' }}>
                全部82&gt;
              </span>
            </div>
            <div className="imbox">
              <div className="imgs">
                {i.children.map((j) => {
                  return (
                    <img
                      onClick={async () => {
                        let reast = await Modal.confirm({
                          title: '即将打开"婚礼纪电子请帖"小程序',
                        });
                        if (reast) {
                          let a = await Modal.confirm({
                            title: '允许后将登录获取微信信息',
                          });
                          if (a) {
                            Toast.show({
                              content: history.push('/hunli'),
                            });
                          }
                        }
                      }}
                      src={require(`../../../imgs/${j.imgurl}`)}
                      key={j.id}
                      style={{ width: '130px', height: '200px' }}
                      alt=""
                    />
                  );
                })}
              </div>
            </div>
          </div>
        ))}
      </div>
      <div className="ctfmygdl">
        <Divider
          style={{
            height: '50px',
          }}
        >
          没有更多了
        </Divider>
      </div>
    </>
  );
};
